<template>
	<div id="login" :style="{backgroundImage:'url(' + bgUrl +')'}">
		<div class="main">
			<div class="tl-icon"></div>
			<div class="login-msg">
				<h2 class="login-tit">欢迎登录雷迪奥科技有限公司</h2>
				<div class="msg-box username">
					<div class="user-icon"></div>
					<input @keyup.13="login()" v-model="account" type="text" placeholder="账号"/>
				</div>
				<div class="msg-box pwd">
					<div class="pwd-icon"></div>
					<input @keyup.13="login()" v-model="password" type="password" placeholder="密码"/>
				</div>
				<div class="msg-box checkbox">
					<el-checkbox style="color: rgb(140, 140, 140);" class="el-checkbox" v-model="remember">记住密码</el-checkbox>
				</div>
				<div class="login-btn">
					<h2 @click="login" class="btn-primary">登录</h2>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
	common = require('../../common.js');

	export default {
		data() {
			return {
				account: '',
				password: localStorage.getItem('password') ? localStorage.getItem('password') : '',
				remember: false,
				bgUrl: ''
			}
		},
		methods: {
			login() {
				let url = CONSTANT.URL.STAFF.LOGIN,
					param = {
						password: this.password,
						workCard: this.account
					}
				this.$http.post(url, JSON.stringify(param), {emulateJSON: true}).then(res => {
					let data = res.data;
					// console.log(res)
					if(data.status == 200){
						let list = data.data.bussData;
						this.$message({
							type: 'success',
							message: '登录成功!'
						});
						sessionStorage.setItem('sessionId', list.sessionId);
						sessionStorage.setItem('manager', this.account);
						sessionStorage.setItem('userName', list.userName);
						
						setTimeout(()=> { 
							this.$router.push('/')
						}, 1000);
					}else{
						this.$message({
							type: 'warning',
							message:data.msg
						});
					}
				}, res => {
					// error callback
				});
			},
			getBg() {
				let url = CONSTANT.URL.BACKGROUND.FINDSTAFFBACKGROUND;
				let data = {
				} ;
				common.requestAjax(url,JSON.stringify(data),null,(res)=>{
					let arr =  res.data.bussData;
					this.bgUrl = arr.imageUrl
					// console.log(arr)
				})
			}
		},
		watch: {
			remember: function savePwd() {
				if(this.password != '') {
					localStorage.setItem('password', this.password)
				}
			}
		},
		mounted() {
			this.getBg()
		},
	}
</script>

<style scoped="scoped">
	#login {
		position: fixed;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background-color: #4a9cd2;
		display: flex;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.main {
		width: 70%;
		height: 75%;
		margin: auto auto;
		background: url(../../assets/login_bg.png) no-repeat 100% 100%;
		background-size: 100% 100%;
		position: relative;
	}
	.tl-icon {
		margin: 36px 0 0 36px;
		width: 165px;
		height: 77px;
		background: url(../../assets/logo.png) no-repeat 100% 100%;
		background-size: cover;
	}
	.login-msg {
		position: absolute;
		top: 156px;
		right: 10%;
		font-size: 16px;
	}
	.login-tit {
		font-size: 22px;
		text-align: center;
		color: rgba(195, 24, 21, 1);
		padding-bottom: 50px;
	}
	.msg-box {
		border-bottom: 1px solid rgb(140, 140, 140);
		position: relative;
		margin-bottom: 20px;
	}
	input {
		display: block;
		padding-left: 45px;
		height: 50px;
		/* width: 315px; */
		border: none;
		outline-style: none;
		font-size: 16px;
	}
	.user-icon {
		position: absolute;
		top: 15px;
		left: 10px;
		width: 20px;
		height: 21px;
		background: url(../../assets/icon_person.png) no-repeat 50% 50%;
		background-size: contain;
	}
	.pwd-icon {
		position: absolute;
		top: 15px;
		left: 10px;
		width: 20px;
		height: 21px;
		background: url(../../assets/icon_pwd.png) no-repeat 50% 50%;
	}
	.msg-box.checkbox {
		border: none;
	}
	.el-checkbox {
		padding-left: 13px;
	}
	.login-btn {
		width: 200px;
		height: 46px;
		margin: 35px auto 0;
		background: url(../../assets/red_btn_icon.png) no-repeat 100% 100%;
		background-size: 100%;
	}
	.btn-primary {
		line-height: 46px;
		width: 100%;
		font-size: 22px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		font-weight: 400;
		cursor: pointer;
	}
</style>